<template>
  <div>
    <Header/>
    <div class="main">
      <el-row>
        <el-col :span="3">
          <el-menu
            :default-active="defaultActive"
            class="el-menu-vertical-demo"
            background-color="#ffffff"
            text-color="#454b45"
            active-text-color="#59a869"
            unique-opened
            router>
            <el-submenu index="1">
              <template slot="title">
                <i class="iconfont icon-blog menu-icon"></i>
                <span>博客管理</span>
              </template>
              <el-menu-item index="/admin/blog">
                <i class="iconfont icon-edit-blog menu-icon"></i>
                <span slot="title">博客列表</span>
              </el-menu-item>
              <el-menu-item index="/admin/blog/save/sj">
                <i class="iconfont icon-bianji menu-icon"></i>
                <span slot="title">添加博客</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="iconfont icon-category-white menu-icon"></i>
                <span>分类管理</span>
              </template>
              <el-menu-item index="/admin/category">
                <i class="iconfont icon-black-black menu-icon"></i>
                <span slot="title">分类列表</span>
              </el-menu-item>
              <el-menu-item index="/admin/category/save">
                <i class="iconfont icon-tianjia1 menu-icon"></i>
                <span slot="title">添加分类</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="iconfont icon-biaoqian1 menu-icon"></i>
                <span>标签管理</span>
              </template>
              <el-menu-item index="/admin/tag">
                <i class="iconfont icon-biaoqian4 menu-icon"></i>
                <span slot="title">标签列表</span>
              </el-menu-item>
              <el-menu-item index="/admin/tag/save">
                <i class="iconfont icon-tianjia2 menu-icon"></i>
                <span slot="title">添加标签</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="iconfont icon-caidanguanli menu-icon"></i>
                <span>菜单管理</span>
              </template>
              <el-menu-item index="/admin/menu">
                <i class="iconfont icon-caidan1 menu-icon"></i>
                <span slot="title">菜单列表</span>
              </el-menu-item>
              <el-menu-item index="/admin/menu/save">
                <i class="iconfont icon-menu menu-icon"></i>
                <span slot="title">编辑菜单</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="iconfont icon-renyuanguanli menu-icon"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/admin/user">
                <i class="iconfont icon-renyuan menu-icon"></i>
                <span slot="title">用户列表</span>
              </el-menu-item>
              <el-menu-item index="/admin/user/save">
                <i class="iconfont icon-tianjia3 menu-icon"></i>
                <span slot="title">添加用户</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="iconfont icon-userInfo-db menu-icon"></i>
                <span>个人设置</span>
              </template>
              <el-menu-item index="/admin/myself">
                <i class="iconfont icon-userInfo menu-icon"></i>
                <span slot="title">个人资料</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
        <el-col :span="20" :offset="3">
          <div class="main-box">
            <router-view/>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";

export default {
  name: "Admin",
  components: {
    Header
  },
  data() {
    return {
      defaultActive: "",
      isCollapse: true
    };
  },
  mounted() {
    this.defaultActive = this.$route.path;
  },
  methods: {}
}
</script>

<style scoped>
.main {
  margin-top: 7vh;
  padding-left: 10px;
}

.el-menu-vertical-demo {
  border-radius: 5px 0 0 5px !important;
  overflow: hidden;
  min-height: 90vh;
  position: fixed;
  width: inherit;
}

.main-box {
  width: 100%;
  min-height: 90vh;
  background-color: #ffffff;
  padding: 15px 30px;
  box-sizing: border-box;
  margin-left: 1vw;
  border-radius: 5px;
}

.menu-icon {
  font-weight: bolder;
  font-size: 18px;
  margin: 0 5px 0 0;
}
</style>
